<template>
  <div id="Content">
    <el-dialog
      title="处理中..."
      :visible.sync="dialogTableVisible"
      :show-close="false"
      :close-on-press-escape="false"
      :append-to-body="true"
      :close-on-click-modal="false"
      :center="true"
    >
      <el-progress :percentage="percentage"></el-progress>
      <span slot="footer" class="dialog-footer"
        >小水管CPU服务器，请等待约3~5秒钟（图片分辨率越低越快）</span
      >
    </el-dialog>

    <div id="Main">
      <div id="IO">
        <el-card
          id="IOCard"
          class="box-card"
          style="
            border-radius: 8px;
            width: 800px;
            height: 350px;
            margin-bottom: -30px;
          "
        >
          <el-row slot="header" class="clearfix">
            <el-col :span="8">
              <span
                style="font-family: Consolas; font-size: 28px; color: #21b3b9"
                >简影</span
              >
            </el-col>
            <el-col :span="8" :offset="7">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <div class="demo-image__preview1">
            <div
              v-loading="loading"
              element-loading-text="上传图片中"
              element-loading-spinner="el-icon-loading"
            >
              <el-image
                :src="url_1"
                class="image_1"
                :preview-src-list="srcList"
                style="border-radius: 3px 3px 0 0"
                id="uploaded_img"
              >
                <div slot="error">
                  <div slot="placeholder" class="error" style="margin-top:28%">
                    <el-button
                      style="margin: 0px 0px 5px -5px"
                      v-show="showbutton"
                      type="primary"
                      icon="el-icon-upload"
                      class="download_bt"
                      v-on:click="true_upload"
                    >
                      上传图像
                      <input
                        ref="upload"
                        style="display: none"
                        name="file"
                        type="file"
                        @change="update"
                      />
                    </el-button>
                    <el-button
                      style="margin-left: -5px"
                      v-show="showbutton"
                      type="primary"
                      icon="el-icon-picture-outline-round"
                      class="download_bt"
                      v-on:click="random_image"
                    >
                      随机图像
                    </el-button>
                  </div>
                </div>
              </el-image>
            </div>
            <div class="img_info_1" style="border-radius: 0 0 5px 5px">
              <span style="color: white; letter-spacing: 6px">原始图像</span>
            </div>
          </div>
          <div class="demo-image__preview2">
            <div
              v-loading="loading"
              element-loading-text="处理中,请等待"
              element-loading-spinner="el-icon-loading"
            >
              <el-image
                :src="url_2"
                class="image_1"
                :preview-src-list="srcList1"
                style="border-radius: 3px 3px 0 0"
              >
                <div slot="error">
                  <div slot="placeholder" class="error"></div>
                </div>
              </el-image>
            </div>
            <div class="img_info_1" style="border-radius: 0 0 5px 5px">
              <span style="color: white; letter-spacing: 4px">处理结果</span>
            </div>
          </div>
        </el-card>
      </div>

      <div id="info_patient">
        <!-- 卡片放置表格 -->
        <el-card style="border-radius: 8px">
          <div slot="header" class="clearfix">
            <!-- 修复按钮区域 -->
            <div v-show="this.value == 'objectRemove'">
              <el-button
                v-show="!showbutton"
                type="primary"
                icon="el-icon-key"
                class="download_bt"
                v-on:click="inpaint"
              >
                修复
              </el-button>

              <el-button
                style="margin-left: 10px"
                v-show="!showbutton"
                type="primary"
                icon="el-icon-circle-close"
                class="download_bt"
                v-on:click="initCanvas"
              >
                清除所有遮挡
              </el-button>
              <el-button
                style="margin-left: 10px"
                v-show="!showbutton"
                type="primary"
                icon="el-icon-upload"
                class="download_bt"
                v-on:click="true_upload2"
              >
                上传新图像
                <input
                  ref="upload2"
                  style="display: none"
                  name="file"
                  type="file"
                  @change="update"
                />
              </el-button>
              <el-button
                style="margin-left: 10px"
                v-show="!showbutton"
                type="primary"
                icon="el-icon-picture-outline-round"
                class="download_bt"
                v-on:click="random_image"
              >
                随机图像
              </el-button>

              <div style="margin-left:5%; display:inline;">
                <span style="font-family: Consolas">笔宽:</span>
                <input
                  type="range"
                  name="mask length"
                  max="60"
                  min="10"
                  v-bind:value="slide"
                  @change="slideChange"
                />
                <span id="show" style="font-family: Consolas">30</span>
              </div>
            </div>

            <!-- 去背景按钮 -->
            <div v-show="this.value == 'backgroundRemove'">
              <el-button
                v-show="true"
                type="primary"
                icon="el-icon-box"
                class="download_bt"
                @click="removeBg"
              >
                背景去除
              </el-button>
            </div>

            <!-- 图片裁剪 -->
            <div class="rc-cropper" v-show="this.value == 'changeImageSize'">
              <div>
                <el-tooltip content="裁剪" placement="left">
                  <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-crop"
                    @click="initCropper"
                    :disabled="croppShow"
                    >图片裁剪</el-button
                  >
                </el-tooltip>
                <el-tooltip content="确认裁剪" placement="left" v-if="cropper">
                  <el-button type="success" size="mini" @click="sureCropper"
                    ><i class="el-icon-check"></i
                  ></el-button>
                </el-tooltip>
                <el-tooltip content="取消裁剪" placement="left" v-if="cropper">
                  <el-button
                    type="danger"
                    size="small"
                    @click="cancelCropper"
                    v-if="cropper"
                    ><i class="el-icon-close"></i
                  ></el-button>
                </el-tooltip>
              </div>
            </div>
          </div>

          <div
            id="canvas_holder"
            class="canvas_holder"
            style="width: 755px; height:455px; display:flex"
            border
            lazy
          >
            <canvas
              id="ctx_front"
              ref="ctx_front"
              :style="'cursor:' + cursor"
              style="display:block; margin: 0 auto; align-self:center;"
            >
            </canvas>
            <canvas
              id="ctx_base"
              ref="ctx_base"
              :style="'cursor:' + cursor"
              style="display:block; margin: 0 auto; align-self:center;"
            >
            </canvas>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import cursors from "./cursor";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.min.css";

export default {
  name: "Content",
  data() {
    return {
      server_url: "http://127.0.0.1:5003",
      activeName: "first",
      active: 0,
      centerDialogVisible: true,
      url_1: "",
      url_2: "",
      url_3: "",
      pdfBase64: "",
      mask_url: "",
      changeImage: false,
      textarea: "",
      srcList: [],
      srcList1: [],
      feature_list: [],
      feature_list_1: [],
      feat_list: [],
      url: "",
      visible: false,
      loading: false,
      table: false,
      isNav: false,
      showbutton: true,
      percentage: 0,
      fullscreenLoading: false,
      opacitys: {
        opacity: 0,
      },
      dialogTableVisible: false,
      ptype: "1",
      /**Painting*/
      showTools: 1,
      activeTool: 1,
      tools: [
        {
          icon: `url('${cursors.pen}'),auto`,
          name: "画笔",
          toolType: 1,
        },
        {
          icon: `crosshair`,
          name: "矩形",
          toolType: 2,
        },
      ],
      cursor: `url('${cursors.pen}'),auto`,
      slide: 30,
      canvas_front: null,
      canvas_base: null,
      ctx_base: null,
      ctx_front: null,
      currentImg: {
        url: "",
        width: "",
        height: "",
        scale: 1,
        index: 0,
      },
      canDraw: false,
      canvasStore: [],
      img_name: "",
      cropper: null,
      croppShow: false,
      base_url: null,
      options: [
        {
          value: "objectRemove",
          label: "去物体",
        },
        {
          value: "backgroundRemove",
          label: "去背景",
        },
        {
          value: "changeImageSize",
          label: "图片裁剪",
        },
      ],
      value: "objectRemove",
    };
  },

  created: function() {
    document.title = "简影";
  },

  methods: {
    // 显示裁剪框
    initCropper() {
      var obj = document.getElementById("ctx_front");
      obj.style.cssText = "z-index:0;";
      this.croppShow = true;
      let cropper = new Cropper(this.$refs.ctx_base, {
        checkCrossOrigin: true,
        viewMode: 2,
        aspectRatio: 3 / 2,
      });
      this.cropper = cropper;
    },
    // 确认裁剪
    sureCropper() {
      const selectEdit = true;
      let _this = this;
      
      this.cropper.getCroppedCanvas().toBlob(function(blob) {
        const href = window.URL.createObjectURL(blob);
        _this.url_3 = blob;      
        _this.blobToBase64(blob, (dataurl) => {
        _this.pdfBase64  = dataurl;
        });
        _this.changeImage = true;
        _this.initCanvas(href, selectEdit);   
      }, "image/jpeg");
      this.cancelCropper();
    },
    // 销毁裁剪框
    cancelCropper() {
      var obj = document.getElementById("ctx_front");
      obj.style.cssText = "z-index:5;";
      this.cropper.destroy();
      this.croppShow = false;
      this.cropper = null;
    },

    slideChange(e) {
      document.getElementById("show").innerHTML = e.target.value;
      this.slide = e.target.value;
    },
    dataURLToBlob(dataurl) {
      //ie 图片转格式
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
  
    // 去瑕疵
    inpaint() {
      // window.console.log('success')
      this.percentage = 0;
      this.dialogTableVisible = true;
      this.srcList1 = [];
      this.feature_list = [];
      this.feat_list = [];
      this.fullscreenLoading = true;
      this.loading = true;
      if(this.changeImage == true){
        this.mask_url = this.pdfBase64;
      }else{
        this.mask_url = this.canvas_front.toDataURL("image/jpeg");
      }
      let mask_file = this.dataURLToBlob(this.mask_url);
      let param = new FormData(); //创建form对象
      param.append("mask", mask_file, this.img_name + "_mask.jpg"); //通过append向form对象添加数据
      param.append("isCut",this.changeImage);

      var timer = setInterval(() => {
        this.myFunc();
      }, 30);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      }; //添加请求头
      axios
        // window.console.log("send", masked_img_file, param)
        .post(this.server_url + "/inpaint", param, config)
        // window.console.log("return")
        .then((response) => {
          this.percentage = 100;
          clearInterval(timer);
          // this.url_1 = response.data.image_url;
          // this.srcList.push(this.url_1);
          this.url_2 = response.data.draw_url;
          this.srcList1.push(this.url_2);
          this.fullscreenLoading = false;
          this.loading = false;

          this.dialogTableVisible = false;
          this.percentage = 0;
          this.notice2();
        });
       
    },

    /** 显示或隐藏工具栏*/
    handleShowTools(status) {
      this.showTools = status;
    },
    /** 工具切换*/
    handleChangeToolType() {
      this.activeTool = this.ptype;
      switch (this.ptype) {
        case "1":
          this.cursor = `url('${cursors.pen}'),auto`;
          break;
        case "2":
          this.cursor = `crosshair`;
          break;
        default:
          this.cursor = `url('${cursors.pen}'),auto`;
          break;
      }
      this.handleDrawCanvas(this.ptype);
    },
    handleFrommatCanvas() {
      this.ctx_front.clearRect(
        0,
        0,
        this.canvas_front.width,
        this.canvas_front.height
      );
    },
    handleDrawCanvas(type) {
      this.canDraw = false;
      let sx, sy, mx, my;
      //鼠标按下
      let mousedown = (e) => {
        // window.console.log('mousedown')
        this.ctx_front.strokeStyle = this.defaultColor;
        this.ctx_front.lineWidth = this.slide;
        // window.console.log(this.slide)
        e = e || window.event;
        sx = e.clientX - this.canvas_front.offsetLeft;
        sy = e.clientY - this.canvas_front.offsetTop;
        this.ctx_front.moveTo(sx, sy);
        this.canDraw = true;
        switch (type) {
          case "1":
            this.ctx_front.beginPath();
            break;
        }
      };
      let mousemove = (e) => {
        e = e || window.event;
        mx =
          e.clientX -
          document.getElementById("info_patient").offsetLeft -
          (document.getElementById("canvas_holder").offsetWidth -
            this.canvas_front.width) /
            2 +
          document.documentElement.scrollLeft;
        my =
          e.clientY -
          document.getElementById("info_patient").offsetTop -
          (document.getElementById("canvas_holder").offsetHeight -
            this.canvas_front.height) /
            2 +
          document.documentElement.scrollTop;
        if (this.canDraw) {
          // window.console.log(mx, my, document.documentElement.scrollTop, document.documentElement.scrollLeft);
          switch (type) {
            case "1":
              this.ctx_front.lineTo(mx - 20, my - 70);
              this.ctx_front.strokeStyle = "white";
              this.ctx_front.stroke();
              break;
            case "2":
              this.handleFrommatCanvas();
              this.ctx_front.beginPath();
              // eslint-disable-next-line no-case-declarations
              let rds = Math.sqrt(
                (sx - 10 - mx) * (sx - 10 - mx) +
                  (sy - 49 - my) * (sy - 49 - my)
              );
              this.ctx_front.arc(sx - 15, sy - 69, rds, 0, Math.PI * 2, false);
              this.ctx_front.strokeStyle = "white";
              this.ctx_front.stroke();
              break;
          }
        }
      };
      let mouseup = () => {
        if (this.canDraw) {
          // window.console.log('mouseup')
          this.canDraw = false;
          this.ctx_front.closePath();
          this.handleSaveCanvasStore();
        }
      };
      this.canvas_front.onmousedown = (e) => mousedown(e);
      this.canvas_front.onmousemove = (e) => mousemove(e);
      this.canvas_front.onmouseup = (e) => mouseup(e);
      this.canvas_front.onmouseout = (e) => mouseup(e);
      this.canvas_front.onmouseleave = (e) => mouseup(e);
    },
    /** 保存绘制*/
    handleSaveCanvasStore() {
      let url = this.canvas_front.toDataURL();
      let image = new Image();
      image.src = url;
      image.onload = () => {
        this.ctx_front.clearRect(
          0,
          0,
          this.canvas_front.width,
          this.canvas_front.height
        );
        this.ctx_front.drawImage(image, 0, 0, image.width, image.height);
        const url2 = this.canvas_front.toDataURL();
        // this.currentImg.url = url2;
        // this.currentImg.index += 1;
  //      window.console.log(url2);
        this.canvasStore.push(url2);
        // window.console.log(this.canvasStore);
      };
    },
    true_upload() {
      this.$refs.upload.click();
    },
    true_upload2() {
      this.$refs.upload2.click();
    },
    next() {
      this.active++;
    },
    // 获得目标文件
    getObjectURL(file) {
      var url = null;
      if (window.createObjcectURL != undefined) {
        url = window.createOjcectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }

      return url;
    },
    random_image() {
      this.img_name = Math.round(Math.random() * 11);
      this.base_url = "http://127.0.0.1:5003/tmp/ct/" + this.img_name + ".jpg";
      this.percentage = 0;
      this.dialogTableVisible = true;
      this.url_1 = this.base_url;
      this.url_2 = "";
      this.srcList = [];
      this.srcList1 = [];
      this.feature_list = [];
      this.feat_list = [];
      this.fullscreenLoading = true;
      this.loading = true;
      this.showbutton = false;
      this.percentage = 100;
      // window.console.log(this.url_1)
      this.srcList.push(this.url_1);
      this.fullscreenLoading = false;
      this.loading = false;

      this.dialogTableVisible = false;
      this.percentage = 0;
      this.notice3();
      this.initCanvas();
      this.handleChangeToolType();
    },

    // 上传文件
    update(e) {
      // console.log(e);
      this.img_name = Date.now();
      this.base_url = "http://127.0.0.1:5003/tmp/ct/" + this.img_name + ".jpg";
      this.percentage = 0;
      this.dialogTableVisible = true;
      this.url_1 = "";
      this.url_2 = "";
      this.srcList = [];
      this.srcList1 = [];
      this.feature_list = [];
      this.feat_list = [];
      this.fullscreenLoading = true;
      this.loading = true;
      this.showbutton = false;
      let file = e.target.files[0];
      this.url_1 = this.$options.methods.getObjectURL(file);
      // console.log(this.url_1);
      let param = new FormData(); //创建form对象
      param.append("file", file, this.img_name + ".jpg"); //通过append向form对象添加数据
      var timer = setInterval(() => {
        this.myFunc();
      }, 30);
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      }; //添加请求头
      axios
        .post(this.server_url + "/upload", param, config)
        .then((response) => {
          this.percentage = 100;
          clearInterval(timer);
          this.url_1 = response.data.image_url;
          this.srcList.push(this.url_1);
          // this.url_2 = response.data.draw_url;
          // this.srcList1.push(this.url_2);
          this.fullscreenLoading = false;
          this.loading = false;

          this.dialogTableVisible = false;
          this.percentage = 0;
          this.notice1();
          this.initCanvas();
          this.handleChangeToolType();
        });
    },

    // 上传去背景文件
    removeBg() {
      let res = document.getElementById("uploaded_img").src.split("/")[5];
      NProgress.start();

      let data = {
        image: res,
      };

      axios.post(this.server_url + "/removeBg", data).then((response) => {
        this.url_2 = response.data.image_url;
        this.srcList1.push(this.url_2);
        NProgress.done();
        this.notice2();
      });
    },

    myFunc() {
      if (this.percentage + 33 < 99) {
        this.percentage = this.percentage + 33;
      } else {
        this.percentage = 99;
      }
    },
    drawChart() {},
    notice1() {
      this.$notify({
        title: "上传成功",
        message: "点击图片可以查看大图",
        duration: 3000,
        type: "success",
      });
    },
    notice2() {
      this.$notify({
        title: "处理成功",
        message: "点击图片可以查看大图",
        duration: 3000,
        type: "success",
      });
    },
    notice3() {
      this.$notify({
        title: "随机加载成功",
        message: "点击图片可以查看大图",
        duration: 3000,
        type: "success",
      });
    },
    blobToBase64(blob, callback) {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        callback(e.target.result);
      };
      fileReader.readAsDataURL(blob);
    },
    initCanvas(href, selectEdit) {
      // let uploaded_img = document.getElementById('uploaded_img');
      this.canvas_front = document.getElementById("ctx_front");
      this.ctx_front = this.canvas_front.getContext("2d");
      this.canvas_base = document.getElementById("ctx_base");
      this.ctx_base = this.canvas_base.getContext("2d");
      let canvasHolder = document.getElementById("canvas_holder");
      let img = new Image();
      img.setAttribute("crossOrigin", "anonymous"); // 避免跨域造成的Uncaught DOMException: Failed to execute toDataURL问题
      if (selectEdit == true) {
        img.src = href || this.base_url;
      } else {
        img.src = this.base_url;
      }

      let _this = this;
      img.onload = function() {
        let dw = parseInt(this.width) / canvasHolder.offsetWidth;
        let dh = parseInt(this.height) / canvasHolder.offsetHeight;
        let height = 0;
        let width = 0;
        if (dw < dh) {
          height = canvasHolder.offsetHeight;
          width = parseInt(this.width) / dh;
        } else {
          width = canvasHolder.offsetWidth;
          height = parseInt(this.height) / dw;
        }
        _this.canvas_front.width = width;
        _this.canvas_front.height = height;
        _this.canvas_base.width = width;
        _this.canvas_base.height = height;
        _this.ctx_base.drawImage(this, 0, 0, width, height);
      };
    },
  },
  mounted() {
    this.drawChart();
    // this.$nextTick(() => {
    //   window.console.log('yyyy')
    //   this.handleChangeToolType();
    // });
  },
};
</script>

<style>
.rc-cropper {
  position: relative;
}

.copyright {
  color: #21b3b9;
  text-align: center;
  margin: 30px auto;
  font-size: 0.9em;
  white-space: pre-wrap;
  font-family: "Consolas", "STZhongsong";
}

.rc-cropper__iconCrop1 {
  position: absolute;
  right: 4%;
  top: 0%;
}

.el-button {
  padding: 12px 20px !important;
}

#hello p {
  font-size: 15px !important;
  /*line-height: 25px;*/
}

.n1 .el-step__description {
  padding-right: 20%;
  font-size: 14px;
  line-height: 20px;
  /* font-weight: 400; */
}
</style>

<style scoped lang="less">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.dialog_info {
  margin: 20px auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 680px;
  height: 200px;
  border-radius: 8px;
  margin-top: -20px;
}

.divider {
  width: 50%;
}

#Main {
  display: flex;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  margin-right: 0px;
  max-width: 1800px;
}

#IOCard {
  width: 90%;
  height: 40%;
  margin: 0px auto;
  padding: 0px auto;
  margin-right: 180px;
  margin-bottom: 0px;
  border-radius: 4px;
}

#IO {
  margin-bottom: 40px;
  margin-left: 30px;
  margin-top: 5px;
}

.image_1 {
  width: 200px;
  height: 180px;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.canvas_holder {
  position: relative;
  min-height: 100%;
  canvas {
    // width: 100%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
  }
  #ctx_front {
    z-index: 5;
  }
  #ctx_base {
    z-index: 1;
  }
}

.img_info_1 {
  height: 30px;
  width: 200px;
  text-align: center;
  background-color: #21b3b9;
  line-height: 30px;
}

.demo-image__preview1 {
  width: 250px;
  height: 290px;
  margin: 10px 80px;
  float: left;
}

.demo-image__preview2 {
  width: 250px;
  height: 290px;

  margin: 10px 460px;
  /* background-color: green; */
}

.error {
  margin: 40% auto;
  width: 50%;
  text-align: center;
}

.block-sidebar {
  position: fixed;
  display: none;
  left: 50%;
  margin-left: 600px;
  top: 350px;
  width: 60px;
  z-index: 99;
}

.block-sidebar .block-sidebar-item {
  font-size: 50px;
  color: lightblue;
  text-align: center;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
  display: block;
}

div {
  display: block;
}

.block-sidebar .block-sidebar-item:hover {
  color: #187aab;
}

.download_bt {
  padding: 10px 16px !important;
}

#upfile {
  width: 104px;
  height: 45px;
  background-color: #187aab;
  color: #fff;
  text-align: center;
  line-height: 45px;
  border-radius: 3px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  font-family: "Source Sans Pro", Verdana, sans-serif;
  font-size: 0.875rem;
}

.file {
  width: 200px;
  height: 130px;
  position: absolute;
  left: -20px;
  top: 0;
  z-index: 1;
  -moz-opacity: 0;
  -ms-opacity: 0;
  -webkit-opacity: 0;
  opacity: 0; /*css属性&mdash;&mdash;opcity不透明度，取值0-1*/
  filter: alpha(opacity=0);
  cursor: pointer;
}

#upload {
  position: relative;
  margin: 0px 0px;
}

#Content {
  width: 85%;
  height: 800px;
  background-color: #ffffff;
  margin: 15px auto;
  display: flex;
  min-width: 1200px;
}

.divider {
  background-color: #eaeaea !important;
  height: 2px !important;
  width: 100%;
  margin-bottom: 50px;
}

.divider_1 {
  background-color: #ffffff;
  height: 2px !important;
  width: 100%;
  margin-bottom: 20px;
  margin: 20px auto;
}

.steps {
  font-family: "lucida grande", "lucida sans unicode", lucida, helvetica,
    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #21b3b9;
  text-align: center;
  margin: 15px auto;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.step_1 {
  /*color: #303133 !important;*/
  margin: 20px 26px;
}

#info_patient {
  margin-top: 0px;
  margin-right: 160px;
}
</style>
